<template><div><h1 id="css相关问题" tabindex="-1"><a class="header-anchor" href="#css相关问题" aria-hidden="true">#</a> css相关问题</h1>
<h3 id="文本超出显示" tabindex="-1"><a class="header-anchor" href="#文本超出显示" aria-hidden="true">#</a> 文本超出显示...</h3>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 单行文本超出显示省略号 */</span>
<span class="token punctuation">{</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">text-overflow</span><span class="token punctuation">:</span>ellipsis<span class="token punctuation">;</span>
  <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 多行文本超出显示省略号 */</span>
<span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
  <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
  <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="滚动条样式在手机端默认不展示-修改滚动条样式" tabindex="-1"><a class="header-anchor" href="#滚动条样式在手机端默认不展示-修改滚动条样式" aria-hidden="true">#</a> 滚动条样式在手机端默认不展示 | 修改滚动条样式</h3>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 以textarea自定义滚动条样式 */</span>
<span class="token selector">textarea::-webkit-scrollbar</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #fff <span class="token important">!important</span><span class="token punctuation">;</span>   
  <span class="token property">width</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">textarea::-webkit-scrollbar-thumb</span> <span class="token punctuation">{</span>
  <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> inset 0 0 6px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 隐藏div元素的滚动条 */</span>
<span class="token selector">div::-webkit-scrollbar</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 拓展 */</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-scrollbar <span class="token property">滚动条整体部分，可以设置宽度啥的</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-scrollbar-button <span class="token property">滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-scrollbar-track <span class="token property">滚动条的轨道</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分<span class="token punctuation">(</span>除去<span class="token punctuation">)</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-scrollbar-thumb <span class="token property">滚动条里面可以拖动的那个</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-scrollbar-corner <span class="token property">边角，即两个滚动条的交汇处</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>-webkit-resizer 定义右下角拖动块的样式
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="calc" tabindex="-1"><a class="header-anchor" href="#calc" aria-hidden="true">#</a> calc</h3>
<p>这是一个css属性，我一般称之为css表达式。可以计算css的值。最有趣的是他可以计算不同单位的差值。很好用的一个功能，缺点是不容易阅读。接盘侠没办法一眼看出20px是啥。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>25% - 20px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="flex布局图片被压缩问题" tabindex="-1"><a class="header-anchor" href="#flex布局图片被压缩问题" aria-hidden="true">#</a> flex布局图片被压缩问题</h3>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">flex-shrink</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>

在使用felx布局的情况下，基本都会用到flex-direction<span class="token punctuation">,</span> justify-content<span class="token punctuation">,</span> align-items这三个容器属性， 
最多涉及图片被挤压了， 使用一下子项的 <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
来防止图片被挤压。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="css禁止文字被选中" tabindex="-1"><a class="header-anchor" href="#css禁止文字被选中" aria-hidden="true">#</a> css禁止文字被选中</h3>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">body</span><span class="token punctuation">{</span>
  <span class="token property">-o-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/*火狐 firefox*/</span>
  <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/*webkit浏览器*/</span>
  <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/*IE10+*/</span>
  <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="删除-type-number-末尾的箭头" tabindex="-1"><a class="header-anchor" href="#删除-type-number-末尾的箭头" aria-hidden="true">#</a> 删除 type=&quot;number&quot; 末尾的箭头</h3>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button</span> <span class="token punctuation">{</span>
  <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="outline-none-删除输入状态线" tabindex="-1"><a class="header-anchor" href="#outline-none-删除输入状态线" aria-hidden="true">#</a> outline:none 删除输入状态线</h3>
<p>当输入框被选中时，它默认会有一条蓝色的状态线，可以通过使用 outline: none 来移除它。<br>
如下图所示：第二个输入框被移除，第一个输入框没有被移除。
<img src="/images/inputArrow.gif" alt="inputArrow" loading="lazy"></p>
<h3 id="绘制三角形" tabindex="-1"><a class="header-anchor" href="#绘制三角形" aria-hidden="true">#</a> 绘制三角形</h3>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f5f6f9<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.triangle</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token comment">/* Base Style */</span>
  <span class="token property">border</span><span class="token punctuation">:</span> solid 10px transparent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*下*/</span>
<span class="token selector">.triangle.bottom</span> <span class="token punctuation">{</span>
  <span class="token property">border-top-color</span><span class="token punctuation">:</span> #0097a7<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*上*/</span>
<span class="token selector">.triangle.top</span> <span class="token punctuation">{</span>
  <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> #b2ebf2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*左*/</span>
<span class="token selector">.triangle.left</span> <span class="token punctuation">{</span>
  <span class="token property">border-right-color</span><span class="token punctuation">:</span> #00bcd4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*右*/</span>
<span class="token selector">.triangle.right</span> <span class="token punctuation">{</span>
  <span class="token property">border-left-color</span><span class="token punctuation">:</span> #009688<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="绘制小箭头" tabindex="-1"><a class="header-anchor" href="#绘制小箭头" aria-hidden="true">#</a> 绘制小箭头</h3>
<p><img src="/images/arrows.png" alt="arrows" loading="lazy"></p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.arrow</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token comment">/* Base Style */</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 16px solid<span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> transparent #cddc39 transparent transparent<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.arrow::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> -20px<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> -16px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 16px solid<span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> transparent #fff transparent transparent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*下*/</span>
<span class="token selector">.arrow.bottom</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*上*/</span>
<span class="token selector">.arrow.top</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*左*/</span>
<span class="token selector">.arrow.left</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*右*/</span>
<span class="token selector">.arrow.right</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用-filter-grayscale-1-使页面处于灰色模式" tabindex="-1"><a class="header-anchor" href="#使用-filter-grayscale-1-使页面处于灰色模式" aria-hidden="true">#</a> 使用 &quot;filter:grayscale(1)&quot;，使页面处于灰色模式</h3>
<p><img src="/images/grayscale.png" alt="grayscale" loading="lazy"></p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">body</span><span class="token punctuation">{</span>
  <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="css中使用-引入图片" tabindex="-1"><a class="header-anchor" href="#css中使用-引入图片" aria-hidden="true">#</a> css中使用@引入图片</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">//使用 ~@ 路径引入 </span>
<span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">'~@/image/title_active.png'</span><span class="token punctuation">)</span> <span class="token number">50</span><span class="token operator">%</span> <span class="token number">50</span><span class="token operator">%</span> no<span class="token operator">-</span>repeat <span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="安装sass报错" tabindex="-1"><a class="header-anchor" href="#安装sass报错" aria-hidden="true">#</a> 安装sass报错</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">//解决方法：在安装node-sass和sass-loader时指定版本，</span>
<span class="token comment">//node-sass跟node的版本有关</span>
npm install node<span class="token operator">-</span>sass@<span class="token number">4.9</span><span class="token number">.2</span> <span class="token operator">--</span>save<span class="token operator">-</span>dev
npm install sass<span class="token operator">-</span>loader@<span class="token number">7.3</span><span class="token number">.1</span> <span class="token operator">--</span>save<span class="token operator">-</span>dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="安装less报错" tabindex="-1"><a class="header-anchor" href="#安装less报错" aria-hidden="true">#</a> 安装less报错</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>npm install less@<span class="token number">3.9</span><span class="token number">.0</span> <span class="token operator">--</span>save<span class="token operator">-</span>dev
npm install less<span class="token operator">-</span>loader@<span class="token number">5.0</span><span class="token number">.0</span> <span class="token operator">--</span>save<span class="token operator">-</span>dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


